package popover

import (
	"github.com/templui/templui/internal/utils"
	"strconv"
)

type Placement string

const (
	PlacementTop         Placement = "top"
	PlacementTopStart    Placement = "top-start"
	PlacementTopEnd      Placement = "top-end"
	PlacementRight       Placement = "right"
	PlacementRightStart  Placement = "right-start"
	PlacementRightEnd    Placement = "right-end"
	PlacementBottom      Placement = "bottom"
	PlacementBottomStart Placement = "bottom-start"
	PlacementBottomEnd   Placement = "bottom-end"
	PlacementLeft        Placement = "left"
	PlacementLeftStart   Placement = "left-start"
	PlacementLeftEnd     Placement = "left-end"
)

type TriggerType string

const (
	TriggerTypeHover TriggerType = "hover"
	TriggerTypeClick TriggerType = "click"
)

type TriggerProps struct {
	ID          string
	Class       string
	Attributes  templ.Attributes
	For         string
	TriggerType TriggerType
}

type ContentProps struct {
	ID               string
	Class            string
	Attributes       templ.Attributes
	Placement        Placement
	Offset           int
	DisableClickAway bool
	DisableESC       bool
	ShowArrow        bool
	HoverDelay       int
	HoverOutDelay    int
	MatchWidth       bool
	Exclusive        bool
}

templ Trigger(props ...TriggerProps) {
	{{ var p TriggerProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.TriggerType == "" {
		{{ p.TriggerType = TriggerTypeClick }}
	}
	<span
		if p.ID != "" {
			id={ p.ID }
		}
		class={ utils.TwMerge("group cursor-pointer", p.Class) }
		if p.For != "" {
			data-tui-popover-trigger={ p.For }
		}
		data-tui-popover-open="false"
		data-tui-popover-type={ string(p.TriggerType) }
		{ p.Attributes... }
	>
		{ children... }
	</span>
}

templ Content(props ...ContentProps) {
	{{ var p ContentProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.Placement == "" {
		{{ p.Placement = PlacementBottom }}
	}
	if p.Offset == 0 {
		if p.ShowArrow {
			{{ p.Offset = 8 }}
		} else {
			{{ p.Offset = 4 }}
		}
	}
	<div
		id={ p.ID }
		data-tui-popover-id={ p.ID }
		data-tui-popover-open="false"
		data-tui-popover-placement={ string(p.Placement) }
		data-tui-popover-offset={ strconv.Itoa(p.Offset) }
		data-tui-popover-disable-clickaway={ strconv.FormatBool(p.DisableClickAway) }
		data-tui-popover-disable-esc={ strconv.FormatBool(p.DisableESC) }
		data-tui-popover-show-arrow={ strconv.FormatBool(p.ShowArrow) }
		data-tui-popover-hover-delay={ strconv.Itoa(p.HoverDelay) }
		data-tui-popover-hover-out-delay={ strconv.Itoa(p.HoverOutDelay) }
		data-tui-popover-exclusive={ strconv.FormatBool(p.Exclusive) }
		if p.MatchWidth {
			data-tui-popover-match-width="true"
		}
		class={ utils.TwMerge(
			"bg-popover rounded-lg border text-popover-foreground text-sm shadow-lg pointer-events-auto absolute z-[9999] hidden top-0 left-0",
			p.Class,
		) }
		{ p.Attributes... }
	>
		<div class="w-full overflow-hidden">
			{ children... }
		</div>
		if p.ShowArrow {
			<div
				data-tui-popover-arrow
				class="absolute h-2.5 w-2.5 rotate-45 bg-popover border border-border
					data-[tui-popover-placement^=top]:-bottom-[5px] data-[tui-popover-placement^=top]:border-t-transparent data-[tui-popover-placement^=top]:border-l-transparent
					data-[tui-popover-placement^=bottom]:-top-[5px] data-[tui-popover-placement^=bottom]:border-b-transparent data-[tui-popover-placement^=bottom]:border-r-transparent
					data-[tui-popover-placement^=left]:-right-[5px] data-[tui-popover-placement^=left]:border-l-transparent data-[tui-popover-placement^=left]:border-b-transparent
					data-[tui-popover-placement^=right]:-left-[5px] data-[tui-popover-placement^=right]:border-r-transparent data-[tui-popover-placement^=right]:border-t-transparent"
			></div>
		}
	</div>
}
